<template>
  <el-button type="primary" @click="getFirewallStatus">刷新</el-button>
  <el-table :data="firewallStatus" border style="margin-top: 20px" v-loading="firewallLoading">
    <el-table-column prop="profile" label="名称" />
    <el-table-column label="状态">
      <template #default="scope">
        <el-switch
          v-model="scope.row.state"
          @change="(val:boolean) => handleFirewallStatusChange(scope.row.profile, val)"
          active-text="开启"
          inactive-text="关闭"
        />
      </template>
    </el-table-column>

  </el-table>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FirewallProfile } from 'main/types/interfaces'

const firewallLoading = ref(false)
const firewallStatus = ref<FirewallProfile[]>([])


onMounted(() => {
  getFirewallStatus()
})


const getFirewallStatus = async () => {
  firewallLoading.value = true
  try {
    firewallStatus.value = await window.electron.getFirewallStatus()
    console.log(firewallStatus.value)
  } finally {
    firewallLoading.value = false
  }
}

const handleFirewallStatusChange = async (profile: '域' | '专用' | '公用', status: boolean) => {
  try {
    await window.electron.setFirewallStatus(status, profile)
    // 刷新状态列表
    await getFirewallStatus()
  } catch (error) {
    console.error('设置防火墙状态失败:', error)
    ElMessage.error('设置防火墙状态失败:' + error);
    // 如果设置失败，刷新列表恢复原状态
    await getFirewallStatus()
  }
}
</script>
